<template>
	<view class="index">
		<input type="text"  :placeholder="search.placeholder"  class="search" @click="input">
		<uni-swiper-dot :info="swiper.data" :current="current" field="content" :mode="mode" class="swiper">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in swiper.data" :key="index">
					<view class="swiper-item">
						<img :src="item.src" alt="" srcset="">
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		  <view class="grid">
				<view class="grid-item" v-for="(item,index) in grid.data" :key="index" @click="gogrid(index)">
						<view class="grid-child">
							<img :src="item.src">
							<p>{{item.name}}</p>
						</view>
				</view>
		  </view>
		  <view class="scroll">
				<view class="coupon" v-for="(item,index) in coupon" :key="index">
						<view :class="item.isgetcoupon==false?'left':'left1'">
							<p>{{item.price}}</p>
							<p class="a1">{{item.value.title}}</p>
						</view>
						<view class="right" @click="ling(item.id)" v-if="item.isgetcoupon==false">领取</view>
						<view class="right1" @click="yiling" v-if="item.isgetcoupon==true">已领取</view>
				</view>
		  </view>
		  <view class="pin">
		  	拼团
		  </view>
		  <view class="scroll-2">
			  <view class="fu" v-for="(item,index) in group" :key="index" @click="godetails(item.id)">
			  		<img :src="item.cover" alt="">
					<view class="text">{{item.title}}</view>
					<view class="price">
						<span>{{item.price}}</span>
						<span class="min-price">{{item.t_price}}</span>
					</view>
			  </view>
		  </view>
		  <view class="lie">
		  	<view class="top">
		  		<view class="left">
		  			最新列表
		  		</view>
				<div class="right" @click="golist">查看更多</div>
		  	</view>
			<view class="content" v-for="(item,index) in grouplist" :key="index" @click="godetails(item.id)">
				<div class="left">
					<img :src="item.cover" alt="" srcset="">
				</div>
				<div class="right">
					<div class="right-top">{{item.title}}</div>
					<div class="bottom">
						<span>{{item.price}}</span>
						<span>{{item.t_price}}</span>
					</div>
				</div>
			</view>
		  </view>
		  <img :src="img" alt="" class="bottomimg">
		  <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getindex,getcoupon,getgroup,getreceive} from '../request/index.js'
	export default {
		data() {
			return {
				list:[],
				search:{},
				swiper:[],
				current:0,
				mode:"round",
				grid:[],
				coupon:[],
				group:[],
				grouplist:[],
				img:'',
				right1:'right1'
				
			}
		},
		onLoad() {
			/**
			 * 获取轮播
			 * */
			getindex().then(res=>{
				this.list= res.data.data
				this.search= res.data.data[0]
				this.swiper=res.data.data[1]
				this.grid=res.data.data[2]
				this.img=res.data.data[6].data
				// console.log(this.list);
			})
			/**
			 * 获取优惠券
			 * */
			getcoupon().then(res=>{
				this.coupon=res.data.data
				console.log(this.coupon,111111);
			})
			/**
			 * 获取拼团
			 * */
			getgroup().then(res=>{
				this.group=res.data.data.rows
				// console.log(this.group);
			})
			getgroup({usable:1}).then(res=>{
				this.grouplist=res.data.data.rows
				// console.log(res,22222);
			})
		},
		onShow() {
			getcoupon().then(res=>{
				this.coupon=res.data.data
				console.log(this.coupon,111111);
			})
		},
		methods: {
			ling(id){
				let token =uni.getStorageSync("token")
				if(token){
					getreceive({coupon_id:id}).then(res=>{
					 uni.redirectTo({
					       url:"/pages/index/index"
					   });
				   })
				}else{
					uni.showToast({
						icon:'error',
						title:"请先登录"
					})
				}
				
			},
			yiling(){
				this.$refs.uToast.show({
					message: "你已经领取过了",
				})
			},
			change(e){
				this.current = e.detail.current;
			},
			golist(){
				uni.navigateTo({
					url:"/pages/Latestlist/Latestlist"
				})
			},
			godetails(id){
				uni.navigateTo({
					url:`/pages/details/details?id=${id}`
				})
			},
			gogrid(index){
				if (index === 1) {
				   uni.navigateTo({
				   	url:`/pages/examination/examination`
				   })
				}
				if (index === 6) {
				   uni.navigateTo({
				   	url:`/pages/eBook/eBook`
				   })
				}
				if (index === 7) {
				   uni.navigateTo({
				   	url:`/pages/community/community`
				   })
				}
				if (index === 0) {
				   uni.navigateTo({
				   	url:`/pages/activity/activity`
				   })
				}
			},
			input(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss">
	.index{
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 10px;
		.bottomimg{
			width: 100%;
			height: 198px;
		}
		.search{
			text-align: center;
			width: 100%;
			height: 50px;
			color: #928e8a;
			background-color: #f5f5f1;
		}
		.swiper{
			margin: 10px 0;
			.swiper-item{
			
			img{
				width: 100%;
				height: 200px;
				border-radius: 5px;
			}
		}
		}
		
		.grid{
			width: 100%;
			height: 150px;
			display: flex;
			flex-wrap: wrap;
			.grid-item{
				width: 25%;
				height: 50%;
				font-size: 15px;
				.grid-child{
					text-align: center;	
					padding: 10px;
					img{
						width: 30px;
						height: 30px;
					}
				}
			}
		}
		.scroll{
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;
			margin-top: 20px;
			.coupon:nth-child(1){
				margin-left: 0;
			}
			.coupon{
				display: inline-block;
				width: 80%;
				height: 60px;
				display: flex;
				font-size: 18px;
				text-align: center;
				margin-left: 30px;
				color: #fff;
				.left{
					width: 247px;
					background-color: #d39e00;
					.a1{
						font-size: 15px;
					}
				}
				.left1{
					width: 247px;
					background-color: #dae0e5;
					.a1{
						font-size: 15px;
					}
				}
				.right1{
					width: 88px;
					height: 100%;
					background-color: #dae0e5;
					line-height: 60px;
					border-left: 2px dashed #fff;
				}
				.right{
					width: 88px;
					height: 100%;
					background-color: #ffc107;
					line-height: 60px;
					border-left: 2px dashed #fff;
				}
			}
		}
		
		.pin{
			height: 50px;
			width: 100%;
			line-height: 50px;
			font-size: 18px;
			font-weight: 800;
			border-top: 10px solid #f3f3f3;
			margin-top: 10px;
		}
		.scroll-2{
			height: 165px;
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;
			box-sizing: border-box;
			border-bottom: 10px solid #f3f3f3;
			view:nth-child(1){
				margin: 0;
			}
			.fu{
				width: 187px;
				height: 100%;
				margin-left: 10px;
				
				img{
					width: 187px;
					height: 50%;
				}
				.min-price{
					font-size: 15px;
				}
				.price{
					span:nth-child(1){
						color: red;
					}
				}
			}
		}
		.lie{
			width: 100%;
			.top{
				width: 100%;
				height: 50px;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				line-height: 50px;
				padding:  10px;
				.left{
					font-weight: 800;
				}
				.right{
					font-size: 16px;
				}
			}
			.content{
				width: 100%;
				height: 115px;
				padding: 10px;
				box-sizing: border-box;
				display: flex;
				.left{
					flex: 4;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					flex: 6;
				}
				
			}
		}
	}
</style>
